<template>
    <div id="communityEdit" class="same-change-oldstyle">
        <div class="same-head-box" style="border-bottom:0px">
            <div class="saem-seat-box">
                <div class="saem-seat-left">
                    <span>当前位置：</span>
                    <el-breadcrumb separator-class="el-icon-arrow-right">
                        <el-breadcrumb-item>园区管理</el-breadcrumb-item>
                        <el-breadcrumb-item :to="{ path: '/communityList' }">园区</el-breadcrumb-item>
                        <el-breadcrumb-item>编辑</el-breadcrumb-item>
                    </el-breadcrumb>
                </div>
                <div class="saem-seat-right">
                    <button class="same-search-btns same-search-export" @click="RefreshFun">刷新</button>
                    <button class="same-search-btns" @click="returnBack">返回</button>
                </div>
            </div>
        </div>
        <div class="editwrap">
            <h4 class="four village-title-wrapper"><i class="el-icon-map-location
                "></i>园区信息编辑</h4>
            <!--            <el-row type="flex">-->
            <!--                <div class="formitem">-->
            <!--                    <span class="title">园区名称</span>-->
            <!--                    <input type="text" name="community_name" v-model="village_name" value="" placeholder="请输入园区名称" />-->
            <!--                    <i class="icon" style="margin-left: 5px !important;">*</i>-->
            <!--                </div>-->
            <!--                <div class="formitem check_record_card_time" style="margin-left:20px">-->
            <!--                    <span class="title">未备案卡限制使用</span>-->
            <!--                    <el-select v-model="check_card_record_name" @change="checkCardRecord" placeholder="请选择检查水卡备案"-->
            <!--                        size="mini" class="inputOne" style="width: 100px;">-->
            <!--                        <el-option v-for="item in check_card_record_list" :key="item.key" :label="item.val"-->
            <!--                            :value="item.key"></el-option>-->
            <!--                    </el-select>-->
            <!--                    <div class="block check_record_card_time_box" v-show="check_record_card_time_show">-->
            <!--                        <el-date-picker v-model="check_record_card_time" type="date" value-format="yyyy-MM-dd"-->
            <!--                            placeholder="选择开启日期">-->
            <!--                        </el-date-picker>-->
            <!--                    </div>-->
            <!--                    <i v-bind:style="styleObject">*</i>-->
            <!--                </div>-->
            <!--            </el-row>-->


            <!--
            <div class="formitem selectitem">
                <span class="title">用户线上打水模板</span>
                <el-select v-model="tpl_WValue" @change="tplChangeW" placeholder="请选择用户线上打水模板">
                    <el-option
                            v-for="(item,index) in tpl_W"
                            :key="item.id"
                            :label="item.template_title"
                            :value="index">
                    </el-option>
                </el-select>
                <i class="icon">*</i>
            </div>
            <table class="tpl_W-show" v-if="tpl_Wxq.template">
                <tbody>
                <tr v-for="(item,key,i) in tpl_Wxq.template"  :key="i">
                    <td>配置{{i+1}}</td>
                    <td>打水量：{{item.rise}} 升</td>
                    <td>金额：{{item.money}} 元</td>
                </tr>
                <tr>
                    <td colspan="3" v-if="data_all.sell_template_type==1">有效日期:<br>{{data_all.sell_start_time}}至{{data_all.sell_end_time}}
                    </td>
                    <td colspan="3" v-else>有效日期:永久使用</td>
                </tr>
                <tr v-if="data_all.sell_water_delete == '是'">
                    <td colspan="3" style="color: red">该模版已被删除</td>
                </tr>
                </tbody>
            </table>
            <div class="formitem selectitem">
                <span class="title">用户自助充值模板</span>
                <el-select v-model="tpl_MValue" @change="tplChangeM" placeholder="请选择用户自助充值模板">
                    <el-option
                            v-for="(item,index) in tpl_M"
                            :key="item.id"
                            :label="item.template_title"
                            :value="index">
                    </el-option>
                </el-select>
                <i class="icon">*</i>
            </div>
            <table class="tpl_M-show" v-if="tpl_Mxq.template">
                <tbody>
                <tr v-for="(item,key,i) in tpl_Mxq.template"  :key="i">
                    <td>充值金额： {{item.recharge}} 元</td>
                    <td>赠送金额：{{item.give}} 元</td>
                </tr>
                <tr>
                    <td colspan="2" v-if="data_all.template_type==1">有效日期:<br>{{data_all.start_time}}至{{data_all.end_time}}
                    </td>
                    <td colspan="2" v-else>有效日期:永久使用</td>
                </tr>
                <tr v-if="data_all.is_delete == '是'">
                    <td colspan="3" style="color: red">该模版已被删除</td>
                </tr>
                </tbody>
            </table> -->

            <div class="village-row">
                <div class="village-cell">
                    <span class="title">园区名称</span>
                    <el-input class='ipt' size="medium" type="text" name="community_name" v-model="village_name"
                        placeholder="请输入园区名称"></el-input>
                    <span class="must-star">*</span>
                </div>
                <div class="village-cell">
                    <span class="title">园区类型</span>
                    <el-select class='ipt-2' size="medium" v-model="village_type" placeholder="请选择类型"
                        @change="chooseVillageType">
                        <el-option v-for="(item,index) in villageTypeList" :key="item.value" :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                    <span class="must-star">*</span>
                </div>
            </div>
            <div class="village-row">
                <div class="village-cell">
                    <span class="title">园区地址</span>
                    <div class="ipt">
                        <el-select size="medium" class="mr-10" v-model="province_name" placeholder="请选择省份"
                            @change="chooseProvince">
                            <el-option v-for="item in Province" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                        <el-select size="medium" class="mr-10" v-model="city_name" placeholder="请选择城市"
                            @change="chooseCity">
                            <el-option v-for="item in City" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                        <el-select size="medium" v-model="area_name" placeholder="请选择区县" @change="chooseArea">
                            <el-option v-for="item in Area" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>

                    </div>
                    <span class="must-star">*</span>
                </div>
                <div class="village-cell">
                    <span class="title">详细地址</span>
                    <!-- <input type="text" name="address" ref="address" @change="chooseAddress" v-model="address"
                        class="ipt-2 el-input-village" id="suggestId" size="20" value="" placeholder="请输入详细地址" />
                    <div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;">
                    </div> -->
                    <el-autocomplete style="width: 300px;" v-model="address" :fetch-suggestions="querySearchAsync"
                        placeholder="请输入内容,例如北京天坛" :trigger-on-focus="false" @select="handleSelect">
                        <template slot-scope="{ item }">
                            <div class="custom-li">
                                <div class="auto-name">{{ item.title }}</div>
                                <span class="auto-addr">{{ item.address }}</span>
                            </div>
                        </template>
                    </el-autocomplete>
                    <span class="must-star">*</span>
                    <i v-if="!showTips" @click="showTips=true" class="el-icon-question question"></i>
                </div>


            </div>
            <div v-if="showTips" class="village-row" style="margin-bottom: 20px;">
                <el-alert @close="showTips=false" title="地图如何操作？" type="info">
                    <p>· 在详细地址中输入关键词，例如北京中关村，从反馈的列表中选择。</p>
                    <p>· 选择完毕后，下方地图会自动定位当选择地址。</p>
                    <p>· 如果当前地图“蓝色标记“不准确，可用鼠标滚轮滚动来缩放地图，拖动”蓝色标记“来标记位置。</p>
                    <p>· 如若觉得详细地址描述不准确，<span style="color: red;">在标记正确的地址后（前三个步骤）</span>，直接修改详细地址。</p>
                </el-alert>
            </div>

            <!-- <div class="items">
                <div class="itemsbot">
                    <span class="lable" style="margin-right: 12px">园区地址</span>
                    <el-select v-model="province_name" placeholder="请选择省份" @change="chooseProvince"
                        style='width: 120px;'>
                        <el-option v-for="item in Province" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                    <el-select v-model="city_name" placeholder="请选择城市" @change="chooseCity" style='width: 120px;'>
                        <el-option v-for="item in City" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                    <el-select v-model="area_name" placeholder="请选择区县" @change="chooseArea" style='width: 120px;'>
                        <el-option v-for="item in Area" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                    <div class="formitem addressitem">
                      
                        <input type="text" name="address" ref="address" @change="chooseAddress" v-model="address"
                            class="inputitem ml10" id="suggestId" size="20" value="" style="width:170px;"
                            placeholder="请输入详细地址" />
                        <div id="searchResultPanel"
                            style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
                        <i class="icon">*</i>
                        <button class="binding" @click="saveVallage">保存</button>
                    </div>
                </div>
            </div> -->
            <!--地图-->
            <!-- <div class="mapwrap" v-loading="loading" element-loading-text="拼命加载中">
                <div id="allmap">
                </div>
            </div> -->
            <div id="container"></div>
            <el-button class="save-btn" size="medium" type="primary" @click="saveVallage">保 存</el-button>
        </div>
    </div>
</template>

<script>
    import { regionDataPlus, CodeToText } from 'element-china-area-data'
    import QQMapWX from '@/lib/js/qqmap-jssdk'
    var tencentMap = new QQMapWX();
    let qqMap, qqMarker;

    export default {
        name: 'communityEdit',
        data: function () {
            return {
                showTips: true,
                longitude: "", //经度
                latitude: "", //纬度

                village_type: "",
                villageTypeList: [],
                check_card_record_list: [
                    {
                        'key': 2,
                        'val': '关闭'
                    },
                    {
                        'key': 1,
                        'val': '开启'
                    }
                ],
                check_card_record: 2,
                check_card_record_name: '关闭',
                check_record_card_time: '',
                check_record_card_time_show: false,
                id: '',//园区id
                village_name: 'xx园区',//园区名称
                tpl_W: [],				//用户线上打水模板数组
                tpl_WValue: '', 	//用户线上打水模板名字
                tpl_Wxq: [],
                iswShow: false, //是否显示打水模板
                set_template_id: '', //打水模板id

                tpl_M: [],				//用户自助充值模板数组
                tpl_MValue: '', 	//用户自助充值模板名字
                tpl_Mxq: [],
                ismShow: false, //是否显示自助充值模板
                template_id: '', //充值模板id
                address: '', // 详细地址
                village_id: '', // 园区ID
                userlocation: { lng: "", lat: "" }, // 设备位置，经度-纬度
                tableData: [], // 附近设备的结果集
                count: '', // 附近设备的数量
                list: [], // 附近设备的经纬度
                options: regionDataPlus,
                baidu: '',	// 百度地图
                // 三级联动
                Province: [],
                City: [],
                Area: [],
                province_id: '',
                city_id: '',
                area_id: '',
                province_name: '',
                city_name: '',
                area_name: '',
                province: '',
                city: '',
                area: '',
                data_all: [],
                loading: false,
                search_index: 1,
                styleObject: {
                    'font-style': 'normal',
                    'margin-left': '5px',
                    'color': 'red',
                }
            }
        },
        inject: [
            'reload'
        ],
        methods: {
            RefreshFun() {
                // 调用reload方法，刷新整个页面
                this.reload()
            },
            //返回
            returnBack() {
                this.$router.back(-1);
            },
            //选择园区类型
            chooseVillageType(e) {
                this.village_type = e;
            },
            //获取园区类型
            getVillageType() {
                this.$post({
                    url: "Common/Common/getVillageType",
                    success: res => {
                        if (res.code == 1000) {
                            let keys = Object.keys(res.data);
                            let values = Object.values(res.data);
                            keys.forEach((current, index) => {
                                this.villageTypeList.push({
                                    value: current,
                                    label: values[index]
                                })
                            })
                        } else {
                            this.$message.error(res.message)
                        }
                    }
                })
            },

            checkCardRecord(e) {
                var that = this;
                if (e == 1) {
                    that.check_card_record = 1;
                    that.check_record_card_time_show = true;
                    that.styleObject.margin = '0px 0px 0px 31px';
                } else {
                    that.check_card_record = 2;
                    that.check_record_card_time = '';
                    that.check_record_card_time_show = false;
                    that.styleObject.margin = '0px 0px 0px 5px';
                }
            },
            //充值模板列表
            czList() {
                var that = this;
                // Ajax请求
                that.$post({
                    url: 'Partner/Village/templateList',
                    data: {
                        template_species: 1,
                        row: 100
                    },
                    success: (data) => {
                        if (data.code == 1000) {
                            //that.$message.success(data.message);that.tpl_M = data.data.data;
                            data.data.data.forEach(function (v, k) {
                                if (v.template_status == 1 && v.audit_status == 2 && v.overdue == false) {
                                    that.tpl_M.push(v);
                                }
                            })
                            //console.log(that.tpl_M);
                        } else {
                            that.$message.error(data.message);
                        }

                    }
                })
            },
            //打水模板列表
            dsList() {
                var that = this;
                // Ajax请求
                that.$post({
                    url: 'Partner/Village/templateList',
                    data: {
                        template_species: 2,
                        row: 100
                    },
                    success: (data) => {
                        if (data.code == 1000) {
                            //that.$message.success(data.message);
                            data.data.data.forEach(function (v, k) {
                                if (v.template_status == 1 && v.overdue == false) {
                                    that.tpl_W.push(v);
                                }
                            });
                            //console.log(that.tpl_W);
                        } else {
                            that.$message.error(data.message);
                        }

                    }
                })
            },
            //园区信息查询
            villageInfo() {
                var that = this;
                // Ajax请求
                that.$post({
                    url: 'Partner/Village/getVillage',
                    data: {
                        id: that.id
                    },
                    success: (data) => {
                        if (data.code == 1000) {
                            //that.$message.success(data.message);that.tpl_M = data.data.data;


                            that.getCity(data.data.province)  // 获取市
                            that.getArea(data.data.city);  	  // 获取区县

                            that.village_name = data.data.village_name;
                            that.tpl_WValue = data.data.sell_water_title;
                            that.set_template_id = data.data.sell_id;
                            that.tpl_MValue = data.data.template_title;
                            that.template_id = data.data.template_id;

                            that.tpl_Wxq.template = data.data.sell_template;
                            that.tpl_Mxq.template = data.data.template;
                            that.address = data.data.address;
                            that.province_name = data.data.province_name;
                            that.city_name = data.data.city_name;
                            that.area_name = data.data.area_name;
                            that.province = data.data.province;
                            that.city = data.data.city;
                            that.area = data.data.area;
                            that.village_type = data.data.village_type;

                            that.check_card_record = data.data.check_record_card;

                            if (data.data.check_record_card == 1) {
                                that.check_card_record_name = '开启';
                                that.check_record_card_time_show = true;
                                that.check_record_card_time = data.data.check_record_card_time;
                                that.styleObject.margin = '0px 0px 0px 31px';
                            } else {
                                that.check_card_record_name = '关闭';
                                that.check_record_card_time_show = false;
                                that.check_record_card_time = '';
                            }

                            that.data_all = data.data;
                            this.baidu = data.data.area_name;
                            this.latitude = data.data.lat;
                            this.longitude = data.data.lng;
                            that.getProvince();   // 获取省
                            this.initMap();
                        } else {
                            that.$message.error(data.message);
                        }

                    }
                })
            },
            //改变地址
            chooseAddress() {
                //console.log(1)
                //this.loadBMapScript(); // 改变地址的时候获取刷新地图
            },
            //模板选择
            tplChangeW(e) {
                var sell_tmp = {};
                sell_tmp.sell_start_time = this.tpl_W[e].start_time;
                sell_tmp.sell_end_time = this.tpl_W[e].end_time;
                sell_tmp.sell_template_type = this.tpl_W[e].template_type;
                sell_tmp.sell_water_delete = this.tpl_W[e].is_delete;
                this.data_all = sell_tmp;
                this.tpl_Wxq = this.tpl_W[e];
                // console.log(this.tpl_W[e]);
                this.set_template_id = this.tpl_W[e].id;
            },
            //模板选择
            tplChangeM(e) {
                this.data_all = this.tpl_M[e];
                this.tpl_Mxq = this.tpl_M[e];
                this.template_id = this.tpl_M[e].id;
            },
            handleChange(value) {
                this.baidu = CodeToText[value[0]];
                this.loadBMapScript(); // 改变地址的时候获取刷新地图
            },

            // 三级联动-省
            getProvince() {
                this.$post({
                    url: 'Common/Common/getProvince',
                    data: {},
                    success: (data) => {

                        this.Province = data.data;
                    }
                })
            },
            // 三级联动-市
            getCity(id) {
                this.$post({
                    url: 'Common/Common/getCity',
                    data: { id: id },
                    success: (data) => {

                        this.City = data.data;
                    }
                })
            },
            // 三级联动-区/县
            getArea(id) {

                this.$post({
                    url: 'Common/Common/getArea',
                    data: { id: id },
                    success: (data) => {
                        this.Area = data.data;
                    }

                })
            },
            // 省改变
            chooseProvince(val) {
                //   console.log('省',val)
                var that = this;
                that.province = val;
                // 循环获取选中的地址
                $.each(that.Province, function (k, v) {
                    if (v.id == val) {
                        that.province_name = v.name;
                    }
                });
                this.baidu = that.province_name;
                this.loadBMapScript(); // 改变地址的时候获取刷新地图

                this.getCity(val);
                this.city_id = '';
                this.area_id = '';
                this.city_name = '';
                this.area_name = '';
                this.address = '';
            },
            // 市改变
            chooseCity(val) {
                // console.log('市',val)
                var that = this;
                that.city = val;
                // 循环获取选中的地址
                $.each(that.City, function (k, v) {
                    if (v.id == val) {
                        that.city_name = v.name;
                    }
                });
                this.baidu = that.city_name;
                this.loadBMapScript(); // 改变地址的时候获取刷新地图

                this.getArea(val);
                this.area_id = '';
                this.area_name = '';
                this.address = '';
            },
            // 区/县改变
            chooseArea(val) {
                // console.log('区',val)
                var that = this;
                that.area = val;
                // 循环获取选中的地址
                $.each(that.Area, function (k, v) {
                    if (v.id == val) {
                        that.area_name = v.name;
                    }
                });
                this.baidu = that.area_name;
                this.loadBMapScript(); // 改变地址的时候获取刷新地图
                this.address = '';

            },
            addressfun(value) {
                console.log(value);
            },
            // 获取附近设备
            nearbyEquipment: function (userlocation) {
                var that = this;
                var longitude = userlocation.lng; // 经度
                var latitude = userlocation.lat; // 纬度
                that.$post({
                    url: 'Partner/Equipment/getNearbyEquipment',
                    data: {
                        longitude: longitude,
                        latitude: latitude
                    },
                    success: (data) => {
                        if (data.code == 1000) {
                            that.tableData = []; // 清空数据
                            $.each(data.data.eq_status, function () {
                                that.tableData.push(this)
                            });
                            that.list = data.data.list;
                            that.count = data.data.count;
                        }

                    }
                })
            },
            // 百度地图
            loadBMapScript() {
                let script = document.createElement('script');
                script.src = 'https://api.map.baidu.com/api?v=3.0&ak=prPYIikQwAYGs2NC6OcmhkvMy3U8PHGa&callback=bMapInit';
                document.body.appendChild(script);
            },
            loadmap() {
                this.loading = true;
                window['bMapInit'] = () => {
                    var that = this;
                    var type = 1;

                    // 百度地图API功能
                    function G(id) {
                        return document.getElementById(id);
                    }

                    // 百度地图API功能
                    var map = new BMap.Map("allmap");    // 创建Map实例
                    map.centerAndZoom(this.baidu, 11);  // 初始化地图,设置中心点坐标和地图级别
                    map.addControl(new BMap.MapTypeControl());   //添加地图类型控件
                    map.setCurrentCity(this.baidu);          // 设置地图显示的城市 此项是必须设置的
                    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
                    var ac = new BMap.Autocomplete( //建立一个自动完成的对象
                        {
                            "input": "suggestId",
                            "location": this.baidu
                        });
                    ac.addEventListener("onconfirm", function (e) {
                        searchByStationName();
                        type = 2;
                    });
                    var localSearch = new BMap.LocalSearch(map);
                    localSearch.enableAutoViewport(); //允许自动调节窗体大小
                    //searchByStationName();
                    function searchByStationName() {
                        map.clearOverlays();//清空原来的标注
                        //console.log(that.baidu)
                        var keyword = that.$refs.address.value
                        //var keyword = that.baidu;
                        localSearch.setSearchCompleteCallback(function (searchResult) {
                            //console.log(searchResult)
                            if (searchResult) {
                                var poi = searchResult.getPoi(0);
                                if (poi) {
                                    that.$refs.address.value = keyword;
                                    //alert("您输入的地址无法获取经纬度请查正后测试");
                                    map.centerAndZoom(poi.point, 18);
                                    var marker = new BMap.Marker(new BMap.Point(poi.point.lng, poi.point.lat));  // 创建标注，为要查询的地方对应的经纬度
                                    map.addOverlay(marker);

                                    //设置初始经纬度
                                    that.userlocation.lat = poi.point.lat;
                                    that.userlocation.lng = poi.point.lng;

                                    //marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
                                }
                                else {

                                }
                            }
                        });
                        localSearch.search(keyword);
                    }

                    if (type == 1) {
                        searchByStationName();
                    }
                }


                //					console.log(this.baidu);
                //					var map = new BMap.Map("allmap");
                //					//29.7224213710,106.6290071687
                //					map.centerAndZoom(this.baidu, 18); // 初始化地图,设置城市和地图级别。
                //					map.enableScrollWheelZoom(); //启用滚轮放大缩小，默认禁用
                //					map.enableContinuousZoom(); //启用地图惯性拖拽，默认禁用
                //					console.log(map.getBounds())
                ////					var geolocation = new BMap.Geolocation();
                ////					geolocation.getCurrentPosition(function(position){
                ////						console.log("纬度："+position.point.lat+"；经度："+position.point.lng);
                ////					})
                //					// 百度地图API功能
                ////					var map = new BMap.Map("allmap");
                ////					var point = new BMap.Point(106.6290071687,29.7224213710);
                ////					var marker = new BMap.Marker(point);  // 创建标注
                ////					map.addOverlay(marker);              // 将标注添加到地图中
                ////					map.centerAndZoom(point, 15);
                //
                //					var ac = new BMap.Autocomplete( //建立一个自动完成的对象
                //						{
                //							"input": "suggestId",
                //							"location": map
                //						});
                //
                //					ac.addEventListener("onhighlight", function(e) { //鼠标放在下拉列表上的事件
                //						var str = "";
                //						var _value = e.fromitem.value;
                //						var value = "";
                //						if(e.fromitem.index > -1) {
                //							value = _value.province + _value.city + _value.district + _value.street + _value.business;
                //						}
                //						str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;
                //
                //						value = "";
                //						if(e.toitem.index > -1) {
                //							_value = e.toitem.value;
                //							value = _value.province + _value.city + _value.district + _value.street + _value.business;
                //						}
                //						str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
                //						G("searchResultPanel").innerHTML = str;
                //					});
                //
                //					var myValue;
                //					ac.addEventListener("onconfirm", function(e) { // 鼠标点击下拉列表后的事件
                //						var _value = e.item.value;
                //						//myValue =  _value.street + _value.business;
                //						myValue = this.address;
                //                      //myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
                //                      G("searchResultPanel").innerHTML = "onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;
                //                      G("suggestId").value = myValue;
                //						setPlace();
                //
                //					});
                //
                //					var geoc = new BMap.Geocoder();
                //
                //					function setPlace() {
                //						map.clearOverlays(); //清除地图上所有覆盖物
                //						function myFun() {
                //							that.userlocation = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果    经纬度
                //							var marker = new BMap.Marker(that.userlocation);
                //							map.centerAndZoom(that.userlocation, 18);
                //							map.addOverlay(marker); //添加标注
                //							marker.enableDragging();
                //
                //							// 根据经纬度获取附近的设备-------------------------------------------
                ////							that.nearbyEquipment(that.userlocation);
                //
                //							marker.addEventListener("dragend", function(e) {
                //								//通过点击百度地图，可以获取到对应的point, 由point的lng、lat属性就可以获取对应的经度纬度
                //								var pt = e.point;
                //								geoc.getLocation(pt, function(rs) {
                //									//addressComponents对象可以获取到详细的地址信息
                //									var addComp = rs.addressComponents;
                //									var site = addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber;
                //									that.userlocation = pt;   // 移动红点后获取经纬度
                //								});
                //							});
                //
                //						}
                //						var local = new BMap.LocalSearch(map, { //智能搜索
                //							onSearchComplete: myFun
                //						});
                //						local.search(myValue);
                //					}
                this.loading = false;
                //				};

            },
            //保存
            saveVallage() {
                var that = this;
                // console.log(that.userlocation);
                // return false;
                // Ajax请求
                that.$post({
                    url: 'Partner/Village/editVillage',
                    data: {
                        id: that.id,
                        village_type: this.village_type,
                        check_card_record: that.check_card_record,
                        check_record_card_time: that.check_record_card_time,
                        set_template_id: that.set_template_id,
                        template_id: that.template_id,
                        province: that.province,
                        city: that.city,
                        area: that.area,
                        province_name: that.province_name,
                        city_name: that.city_name,
                        area_name: that.area_name,
                        address: that.address,
                        village_name: that.village_name,
                        lat: that.latitude,
                        lng: that.longitude
                    },
                    success: (data) => {
                        //console.log(data);
                        if (data.code == 1000) {
                            that.$message.success(data.message);
                            that.tpl_M = data.data.data;
                            setTimeout(function () {
                                that.$router.push({ path: '/communityList' })
                            }, 2000);

                        } else {
                            that.$message.error(data.message);
                        }

                    }
                })
            },

            //异步加载腾讯地图处理
            TMap(key) {
                return new Promise(function (resolve, reject) {
                    window.init = function () {
                        resolve(qq)//注意这里
                    }
                    var script = document.createElement("script");
                    script.type = "text/javascript";
                    script.src = `https://map.qq.com/api/js?v=2.exp&key=${key}&callback=init`;
                    script.onerror = reject;
                    document.head.appendChild(script);
                })
            },


            initMap() {
                this.TMap("2CZBZ-RKRK3-HGJ3G-YH2G2-GIL3T-LHBFD").then(qq => {
                    let center = new qq.maps.LatLng(this.latitude || 39.908518, this.longitude || 116.397572);
                    qqMap = new qq.maps.Map(document.getElementById("container"), {
                        center: center,
                        zoom: 14
                    });
                    qqMarker = new qq.maps.Marker({
                        position: center,
                        draggable: true,
                        map: qqMap
                    });
                    qq.maps.event.addListener(qqMarker, 'dragend', ()=> {
                        var currentPosition = qqMarker.getPosition();
                        this.latitude = currentPosition.lat;
                        this.longitude = currentPosition.lng;
                        console.log(currentPosition);
                    });

                });
            },

            querySearchAsync(queryString, cb) {
                tencentMap.getSuggestion({ keyword: queryString }).then(res => {
                    res.forEach(item => {
                        res.value = res.title
                    })
                    console.log(res);
                    cb(res)
                });

            },

            handleSelect(item) {
                this.address = item.title;
                let location = item.location;
                this.longitude = location.lng;
                this.latitude = location.lat;

                console.log(location, "location")
                qqMap.panTo(new qq.maps.LatLng(this.latitude, this.longitude));
                qqMarker.setPosition(new qq.maps.LatLng(this.latitude, this.longitude))
            },


        },
        mounted() {
            this.getProvince();   // 获取省地址
            this.getVillageType();
        },
        created() {
            this.id = this.$route.query.id;
            this.villageInfo();
        }
    }
</script>

<style>
    .block {
        margin-left: 10px !important;
    }

    #communityEdit .check_record_card_time .el-input--suffix .el-input__inner {
        padding-left: 15px !important;
    }

    #communityEdit .check_record_card_time .check_record_card_time_box .el-input--suffix .el-input__inner {
        padding-left: 30px !important;
    }

    #communityEdit .check_record_card_time .icon {
        font-style: normal;
        margin-left: 35px;
        color: #FF6565;
    }

    #communityEdit .inputOne .el-input>input {
        width: 100px;
    }

    #communityEdit {
        background-color: #fff;
    }

    #communityEdit .editwrap {
        padding: 10px 40px 30px;
    }

    #communityEdit .formitem {
        display: flex;
        align-items: center;
        margin: 10px 0;
    }

    #communityEdit .formitem input {
        width: 286px;
        height: 38px;
        border: 1px solid #cccccc;
        border-radius: 4px;
        padding: 0 15px;
    }

    #communityEdit .selectitem {
        margin-top: 40px;
    }

    #communityEdit .selectitem input {
        width: 246px;
    }

    #communityEdit .addressitem {
        width: 360px;
        display: inline-flex;
    }



    #communityEdit .title {
        font-size: 16px;
        color: #323333;
        padding-right: 10px;
    }

    #communityEdit .icon {
        /*font-size: 28px;*/
        /*color: #bc1b21;*/
        font-style: normal;
        margin-left: 5px;
        color: #FF6565;
    }

    #communityEdit table {
        width: 400px;
        height: auto;
        margin-top: 10px;
        border: 1px solid #dde8f6;
        background-color: #f5f5f5;
        padding: 10px 0;
    }

    #communityEdit table td {
        padding: 10px 0 10px 20px;
        font-size: 16px;
        color: #323333;
    }

    #communityEdit .tpl_W-show td:nth-child(1) {
        width: 100px;
    }

    #communityEdit .tpl_W-show td:nth-child(2) {
        width: 160px;
    }

    #communityEdit .tpl_W-show td:nth-child(3) {
        width: 140px;
    }

    #communityEdit .binding {
        outline: none;
        border: 0;
        width: 80px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        color: #fff;
        background-color: #2c5586;
        font-size: 16px;
        font-weight: bold;
        border-radius: 3px;
        margin-top: 20px;
    }

    #communityEdit #allmap {
        width: 80%;
        height: 500px;
    }
</style>
<style scoped>
    .village-title-wrapper {
        display: flex;
        color: #2C5586;
        align-items: flex-end;
    }

    .village-title-wrapper i {
        padding-right: 10px;
    }

    .village-row {
        display: flex;
        align-items: center;
        width: 920px;
        justify-content: space-between;
    }

    .village-cell {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
    }

    .village-cell .title {
        widows: 100px;
        flex-shrink: 0;
        font-size: 14px;
        align-items: center;
    }

    .village-cell .ipt {
        width: 400px;
        display: flex;
    }

    .village-cell .ipt-2 {

        width: 300px;
        display: flex;
    }

    .must-star {
        color: red;
        margin-left: 10px;
    }

    .mr-10 {
        margin-right: 10px;
    }

    .el-input-village {
        -webkit-appearance: none;
        background-color: #FFF;
        background-image: none;
        border-radius: 4px;
        border: 1px solid #DCDFE6;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        color: #606266;
        display: inline-block;
        font-size: inherit;
        height: 36px;
        line-height: 36px;
        outline: 0;
        padding: 0 15px;
        -webkit-transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
        transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
        width: 100%;
    }

    .save-btn {
        margin-top: 20px;
    }

    #container {
        /*地图(容器)显示大小*/
        width: 1000px;
        height: 600px;
    }


    .auto-name {
        text-overflow: ellipsis;
        overflow: hidden;
        font-size: 14px;
    }

    .auto-addr {
        font-size: 12px;
        color: #b4b4b4;
        margin: 0;

        list-style: none;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .custom-li {
        line-height: 24px !important;
    }

    .question {
        position: absolute;
        right: -25px;
        color: #999;
        cursor: pointer;
    }

    #container {
        /*地图(容器)显示大小*/
        width: 1000px;
        height: 600px;
    }


    .auto-name {
        text-overflow: ellipsis;
        overflow: hidden;
        font-size: 14px;
    }

    .auto-addr {
        font-size: 12px;
        color: #b4b4b4;
        margin: 0;

        list-style: none;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .custom-li {
        line-height: 24px !important;
    }

    .question {
        position: absolute;
        right: -25px;
        color: #999;
        cursor: pointer;
    }
</style>